﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Adding jQuery Selectors</title>
<link type="text/css" href="../common/demo.css" rel="stylesheet">
<style type="text/css">
#selectors { margin-left: 15em; padding: 0em 1em; }
#selectors * { border: 1px solid transparent; }
#selectors .highlight { background-color: #ccffcc; border: 1px solid #008000; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.selectors.js"></script>
<script type="text/javascript" src="../common/jquery.chili-2.2.js"></script>
<script type="text/javascript" src="../common/demo.js"></script>
</head>
<body>
<h1>Adding jQuery Selectors</h1>
<p>jQuery lets you extend much of its functionality, including adding new selectors.</p>
<p>jQuery has a <em>contains</em> selector, but that matches anywhere within the text content.
	We can add a selector (<em>content</em>) that checks the complete content for an exact match only,
	and another (<em>matches</em>) that matches content against a regular expression.</p>
<p>We add a <em>list</em> selector that matches both ordered (<em>ol</em>)
	and unordered (<em>ul</em>) lists, and a <em>middle</em> selector that matches
	items other than the first or last in a set.</p>
<p>We could also replace an existing selector to enhance its abilities, such as allowing
	the <em>eq</em> selector to work from the end of the list by specifying a negative number.</p>
<p>The example below shows how they work, being applied within the main list.</p>
<p><span class="demoLabel">Selector:</span>
	<select id="selector">
		<option value=":content(Entry)">Content: :content(Entry)</option>
		<option value=":content(Entry 1)">Content: :content(Entry 1)</option>
		<option value=":content(Entry 1.2)" selected>Content: :content(Entry 1.2)</option>
		<option value=":matches(Entry 1)">Matches: :matches(Entry 1)</option>
		<option value=":matches(~entry [13])">Matches: :matches(~entry [13])</option>
		<option value="ul li:matches(2\.3|3\.1)">Matches: ul li:matches(2\.3|3\.1)</option>
		<option value=":list">List: :list</option>
		<option value=":emphasis">Emphasis: :emphasis</option>
		<option value=":foreign">Foreign: :foreign</option>
		<option value=":foreign(de)">Foreign: :foreign(de)</option>
		<option value="ul:middle">Middle: ul:middle</option>
		<option value="li:eq(2)">Index: li:eq(2)</option>
		<option value="li:eq(-2)">Index: li:eq(-2)</option>
	</select></p>
<ul id="selectors">
	<li>Entry 1
		<ul>
			<li class="linked"><a href="#">Entry 1.1</a> - description</li>
			<li>Entry 1.2</li>
			<li>Entry 1.3</li>
		</ul>
	</li>
	<li>Entry 2
		<ul>
			<li>Entry 2.1</li>
			<li class="linked"><a href="#">Entry 2.2</a> - description</li>
			<li>Entry 2.3</li>
		</ul>
	</li>
	<li>Entry 3
		<ul>
			<li>Entry 3.1</li>
			<li>Entry 3.2</li>
			<li class="linked"><a href="#">Entry 3.3</a> - description</li>
		</ul>
	</li>
	<li lang="en">Foreign
		<ul>
			<li lang="fr"><i>Un</i> (French</li>
			<li lang="de"><em>Zwei</em> (German)</li>
			<li lang="ja"><i>San</i> (Japanese)</li>
		</ul>
	</li>
</ul>
<pre><code class="jsdemo">$('#selector').change(function() {
	$('#selectors *').removeClass('highlight');
	$('#selectors ' + $(this).val()).addClass('highlight');
}).change();</code></pre>

<p>You can contact me via e-mail at kbwood{at}iinet.com.au.</p>
<p><img src="../common/marblegban.gif" width="100%" height="6" alt=""></p>
<p>
	&copy; 2010-2013, Keith Wood
	<a id="valid" href="http://validator.w3.org/check">
		<img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict"></a>
</p>
</body>
</html>
